<template>
    <div class="ml-16px mr-16px pl-26px pt-26px pr-26px pb-26px content-container">
        <el-row :gutter="4">
            <el-col :span="4">
                <div class="web">
                    <h2>数据类型</h2>
                    <ul>
                        <li>收录情况</li>
                        <li>反向链接</li>
                        <li>友情链接</li>
                        <li>权重</li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="web">
                    <h2 class="flex flex-center"><i></i>百度</h2>
                    <ul>
                        <li>17</li>
                        <li>20</li>
                        <li>26</li>
                        <li>39</li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="web">
                    <h2 class="flex flex-center"><i></i>搜狗</h2>
                    <ul>
                        <li>17</li>
                        <li>20</li>
                        <li>26</li>
                        <li>39</li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="web">
                    <h2 class="flex flex-center"><i></i>360</h2>
                    <ul>
                        <li>17</li>
                        <li>20</li>
                        <li>26</li>
                        <li>39</li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="5">
                <div class="web">
                    <h2 class="flex flex-center"><i></i>必应</h2>
                    <ul>
                        <li>17</li>
                        <li>20</li>
                        <li>26</li>
                        <li>39</li>
                    </ul>
                </div>
            </el-col>
        </el-row>
        <div class="flex flex-center project-data">
            <ul>
                <li>
                    <p>2439</p>
                    <span>产品数量</span>
                </li>
                <li>
                    <p>2439</p>
                    <span>产品数量</span>
                </li>
                <li>
                    <p>2439</p>
                    <span>产品数量</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.web{
    text-align: center;
    h2{
        height: 50px;
        line-height: 50px;
        font-size: 18px;
        font-weight: bold;
        color: var(--title-color);
        border-radius: 6px 6px 0 0;
        background-color: #f2f2f2;
    }
    ul{
        li{
            height: 54px;
            line-height: 54px;
            font-size: 14px;
            color: var(--title-color);
            border-bottom:1px solid #eeeeee;
            background-color: #fafafa;
        }
    }
    
}
.el-col{
    &:nth-child(2){
        .web{
            h2{
                color: #ffffff;
                background-image: -moz-linear-gradient( 0deg, rgb(50,114,238) 0%, rgb(73,132,245) 51%, rgb(96,149,252) 100%);
                background-image: -webkit-linear-gradient( 0deg, rgb(50,114,238) 0%, rgb(73,132,245) 51%, rgb(96,149,252) 100%);
                background-image: -ms-linear-gradient( 0deg, rgb(50,114,238) 0%, rgb(73,132,245) 51%, rgb(96,149,252) 100%);
                i{
                    width: 24px;
                    height: 27px;
                    margin-right: 6px;
                    background-image: url('@/assets/images/baidu.png');
                }
            }
            ul{
                li{
                    background-color: #f9faff;
                }
            }
        }
    }
    &:nth-child(3){
        .web{
            h2{
                color: #ffffff;
                background-image: -moz-linear-gradient( 0deg, rgb(246,134,0) 0%, rgb(250,142,16) 51%, rgb(253,150,31) 100%);
                background-image: -webkit-linear-gradient( 0deg, rgb(246,134,0) 0%, rgb(250,142,16) 51%, rgb(253,150,31) 100%);
                background-image: -ms-linear-gradient( 0deg, rgb(246,134,0) 0%, rgb(250,142,16) 51%, rgb(253,150,31) 100%);

                i {
                    width: 28px;
                    height: 28px;
                    margin-right: 6px;
                    background-image: url('@/assets/images/sougou.png');
                }
            }
            ul{
                li{
                    background-color: #fffaf6;
                }
            }
        }
    }
    &:nth-child(4){
        .web{
            h2{
                color: #ffffff;
                background-image: -moz-linear-gradient( 0deg, rgb(34,161,74) 0%, rgb(47,170,85) 51%, rgb(59,178,96) 100%);
                background-image: -webkit-linear-gradient( 0deg, rgb(34,161,74) 0%, rgb(47,170,85) 51%, rgb(59,178,96) 100%);
                background-image: -ms-linear-gradient( 0deg, rgb(34,161,74) 0%, rgb(47,170,85) 51%, rgb(59,178,96) 100%);


                i {
                    width: 26px;
                    height: 24px;
                    margin-right: 6px;
                    background-image: url('@/assets/images/360.png');
                }
            }
            ul{
                li{
                    background-color: #f4faf6;
                }
            }
        }
    }
    &:nth-child(5){
        .web{
            h2{
                color: #ffffff;
                background-image: -moz-linear-gradient( 0deg, rgb(238,63,46) 0%, rgb(244,76,60) 51%, rgb(249,89,73) 100%);
                background-image: -webkit-linear-gradient( 0deg, rgb(238,63,46) 0%, rgb(244,76,60) 51%, rgb(249,89,73) 100%);
                background-image: -ms-linear-gradient( 0deg, rgb(238,63,46) 0%, rgb(244,76,60) 51%, rgb(249,89,73) 100%);


                i {
                    width: 22px;
                    height: 28px;
                    margin-right: 6px;
                    background-image: url('@/assets/images/bing.png');
                }
            }
            ul{
                li{
                    background-color: #fff6f7;
                }
            }
        }
    }
}
.project-data{
    padding:26px;
    ul{
        display: flex;
        li{
            width: 240px;
            height: 90px;
            margin: 0 8px;
            text-align:center;
            background-color: #3989e8;
            background-image: -moz-linear-gradient( 0deg, rgb(57,137,232) 0%, rgb(82,155,242) 51%, rgb(106,172,251) 100%);
            background-image: -webkit-linear-gradient( 0deg, rgb(57,137,232) 0%, rgb(82,155,242) 51%, rgb(106,172,251) 100%);
            background-image: -ms-linear-gradient( 0deg, rgb(57,137,232) 0%, rgb(82,155,242) 51%, rgb(106,172,251) 100%);
            border-radius: 6px;
            color: #fff;
            position:relative;
            p{
                font-size: 24px;
                font-weight: bold;
                font-family: 'Din Web';
                padding:18px 0 10px 0;
            }
            span{
                font-size: 14px;
            }
            &::after{
                content:'';
                position:absolute;
                right: 0;
                bottom:0;
                width: 72px;
                height:72px;
                background:url('@/assets/images/overbg.png') no-repeat 0 0;
                background-size: contain;
            }
            &:nth-child(2){
                background-image: -moz-linear-gradient( 0deg, rgb(1,171,193) 0%, rgb(34,194,215) 51%, rgb(66,217,237) 100%);
                background-image: -webkit-linear-gradient( 0deg, rgb(1,171,193) 0%, rgb(34,194,215) 51%, rgb(66,217,237) 100%);
                background-image: -ms-linear-gradient( 0deg, rgb(1,171,193) 0%, rgb(34,194,215) 51%, rgb(66,217,237) 100%);
            }
            &:nth-child(3){
                background-image: -moz-linear-gradient( 0deg, rgb(31,183,127) 0%, rgb(42,198,141) 51%, rgb(53,217,154) 100%);
                background-image: -webkit-linear-gradient( 0deg, rgb(31,183,127) 0%, rgb(42,198,141) 51%, rgb(53,217,154) 100%);
                background-image: -ms-linear-gradient( 0deg, rgb(31,183,127) 0%, rgb(42,198,141) 51%, rgb(53,217,154) 100%);
            }
        }
    }
}
</style>